<script setup lang="ts">
import PassengerStrokeCard from "~/components/driver/PassengerStrokeCard.vue";

let route=useRoute()
let date=new Date(route.query.time as string);
let inviterId=route.query.id as string;
let quantity=route.query.quantity;
const items:Ref<StrokePO[]>=ref([])

const strokeStatus:Ref<string>=ref(useRoute().query.status as string)
onMounted(function (){
  cFetch('/stroke/api/itinerary/list',{
    auth:true,
    defaultOpts:{
      method:'POST',
      body:{
        id:inviterId
      }
    }
  }).then(res=>{
    let t=res as ApiResponse<StrokePO>
    items.value=t.data;
  }).catch(err=>{
  })
})
function goInvite(id:string){
  navigateTo(`${route.path}/${id}`)
  // console.log(useRoute().path)
}
function go(){
  cFetch(`/stroke/api/departure/${inviterId}`,{
    auth:true,
    defaultOpts:{
      method:'POST',
    }
  }).then(res=>{
    showToast('已发车，行程状态已更新')
    navigateTo('/stroke')
  })
}
</script>

<template>
  <div class="main">
    <div class="info">
      <h2 style="color: RGB(30,144,255);text-align: center;margin: 11px 0;">未出发，拼单中……</h2>
      <p>出发地：{{route.query.from}}</p>
      <p>目的地：{{route.query.to}}</p>
      <p>出发时间：{{date.getFullYear()}}年{{date.getMonth()+1}}月{{date.getDate()}}日 {{date.getHours().toString().padStart(2,'0')}}:{{date.getMinutes().toString().padStart(2,'0')}}</p>
      <p>座位数：{{quantity}}</p>
      <p style="display: flex;justify-content: end;"><span style="position: relative;color: RGB(30,144,255); font-weight: bold;" @click="goInvite(inviterId)">我邀请的 >></span></p>
      <div class="bt-container">
        <van-button style="width: 50%;" size="large" @click="go">出发！</van-button>
      </div>

    </div>

    <div class="drop">
      <span class="title">顺路的乘客：</span>
      <PassengerStrokeCard
          v-for="item in items"
          :id="item.id"
          :inviterId="inviterId"
          :user-alias="item.useralias"
          :from="item.startAddr"
          :to="item.endAddr"
          :start-distance='item.startDistance'
          :end-distance='item.endDistance'
          :departure-time="new Date(item.departureTime)"
          :quickConfirm='item.quickConfirm'
          :avatar="item.avatar"
          :suitability="item.suitability"
          :status="item.status"
      >
      </PassengerStrokeCard>

    </div>

  </div>
</template>

<style scoped>
.main{
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;

}
.info{
  border-radius: 12px;
  background-color: RGB(227,231,228);
  padding: 14px;
  border: 1px solid gray;
  width: 80%;
  margin: 20px auto;
  position: sticky;
  top: 0;
  z-index: 1;
}
.info p{
  position: relative;
  margin: 10px 0;
  overflow-x: auto;
  white-space: nowrap;
}

.drop{
  display: flex;
  flex-direction: column;
  border: 1px solid gray;
  width: calc(80% + 14*2px);
  border-radius: 6px;
  position: relative;
  margin-bottom: 25px;
}
.title{
  width: calc(100% - 29px);
  background-color: ghostwhite;
  padding: 14px;
  border: 1px solid gray;
  border-radius: 6px 6px 0 0;
  color: #ae820b;
  position: relative;
}
.bt-container{
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;

}
</style>